.report-card {
  width: 180rem;
  height: 230rem;
  border-radius: 4rem;
  cursor: pointer;
  position: relative;

  .report-container {
    height: 230rem;
    position: relative;

    .report-title {
      font-size: 14rem;
      font-weight: 500;
      position: absolute;
      top: 16rem;
      left: 0;
      right: 0;
      text-align: center;
    }

    .report-info {
      position: absolute;
      top: 200rem;
      left: 0;
      right: 0;
      padding: 0 10rem;
      display: flex;
      font-size: 12rem;
      font-weight: 500;
      display: flex;
      align-items: center;

      .report-datetype {
        border-radius: 2rem;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 4rem 5rem;
        color:#32c5ff;
        margin-right: 5rem;
        line-height: 12rem;
      }
      .report-name {
        color: rgba(255, 255, 255, 0.65);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        max-width: 130rem;
      }
    }
  }

  .report-operation {
    position: absolute;
    border-radius: 4rem;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 0;
    display: flex;
    flex-direction: column;

    .operation-container {
      width: 100%;
      flex: 1;
      position: relative;

      .operation {
        position: absolute;
        height: 48rem;
        left: 0;
        right: 0;
        font-size: 16rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      // .preview {
      //   top: 54rem;
      // }

      // .download {
      //   bottom: 54rem;
      // }

      &:hover {
        .operation {
          background-color: rgba(50,197,255,0.8);
          left: -5rem;
          right: -5rem;
          color: #fff;
        }
      }
    }

    &:hover {
      opacity: 1;
    }
  }
}
